<template>
	<view class="serve-bill">
		<block v-for="(item,index) in list" :key="index">
			<view class="item">
				<text>{{ item.mark }}</text>
			</view>
		</block>
		<view class='loadingicon acea-row row-center-wrapper'>
			<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
		</view>
	</view>
</template>

<script>
	import{
		orderDetailsBill
	} from '@/api/order.js'
	export default {
		data() {
			return {
				id:'',
				page:1,
				limit:10,
				list:[],
				loadend: false,
				loading: false,
				loadTitle: this.$t(`加载更多`),
				
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getlist();
		},
		methods: {
			getlist(){
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '';
				orderDetailsBill({ page:that.page,limit:that.limit,oid:that.id}).then(res=>{
					let list = res.data.data;
					let arr = that.$util.SplitArray(list, that.list);
					let loadend = list.length < that.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
					that.$set(that, 'list', arr);
					that.$set(that, 'page', that.page + 1);
				}).catch(err=>{
					that.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				})
			},
		},
		onReachBottom(){
			this.getlist();
		}
	}
</script>

<style lang="scss">
	.serve-bill{
		padding: 30rpx;
		
		.item{
			width: 690rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
			background-color: #ffffff;
			color: #333333;
			font-size: 32rpx;
			min-height: 176rpx;
			margin-bottom: 30rpx;
			padding: 30rpx;
		}
		
		
		
	}
</style>
